<template>
  <view class="login">
    <view class="login-container">
      <view class="login-box" :class="{ 'smooth-bounce-in': isBounced }">
        <view class="login-title">
          <text>欢迎使用</text>
          <image src="/static/icon/plus.svg" class="login-title-svg"/>
        </view>
        <view class="login-describe">
          <text>欢迎使用</text>
        </view>
        <view class="login-form">
          <view class="login-input">
            <uni-easyinput prefixIcon="person"
                           v-model="loginInfo.code"
                           placeholder="请输入内容"
                           :clearable="false"/>
          </view>
          <view class="login-input">
            <uni-easyinput prefixIcon="locked"
                           v-model="loginInfo.password"
                           placeholder="请输入内容"
                           type="password"
                           :clearable="false"/>
          </view>
          <view class="login-checkbox">
            <checkbox value="cb" checked="false" color="#6e64f8" style="transform:scale(0.7)"/>
            我已阅读并同意
          </view>
          <button class="login-btn" @click="onSubmit()">登录</button>
          <view class="login-box-footer">
            <text @click="">第三方登录</text>
            <text @click="toResetting">忘记密码</text>
            <text @click="toRegister">立即注册</text>
          </view>
        </view>
      </view>
      <!--<view class="login-footer">
              登录即表示同意《菠萝服务条款》及使用协议
           </view>-->
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {loginAPI} from "../../api/UserAPI";

const loginInfo = ref({
  code: 'admin',
  password: 'admin',
  loginType: 1
})

/* 是否挂载弹性动画样式 */
const isBounced = ref(false)

/* 路由注册页面 */
function toRegister() {
  uni.redirectTo({url: '/pages/register/register'})
}

/* 重置密码 */
function toResetting() {
  uni.redirectTo({url: '/pages/resetting/resetting'})
}

/* 登录 */
async function onSubmit() {
  // 提取登录信息
  /*const {code, password} = loginInfo.value;

  // 检查账号密码是否为空
  if (!checkNotEmpty(code, '请输入账号')) return;
  if (!checkNotEmpty(password, '请输入密码')) return;

  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  const mobileRegex = /^1[3-9]\d{9}$/; // 适用于中国大陆的手机号

  // 判断登录类型
  if (emailRegex.test(code)) {
    loginInfo.value.loginType = 3; // 邮箱登录
  } else if (mobileRegex.test(code)) {
    loginInfo.value.loginType = 2; // 手机号登录
  } else {
    loginInfo.value.loginType = 1; // 默认或其他登录方式
  }

  const resp = await loginAPI(loginInfo.value)
  if (resp.code === 200) {
    // 保存用户信息
    uni.setStorageSync('token', resp.data.loginToken.token)
    uni.setStorageSync('userInfo', resp.data)
    await uni.redirectTo({url: '/pages/index/index'})
  } else {
    await uni.showToast({
      title: resp.msg,
      icon: 'none'
    })
  }*/

  await uni.redirectTo({url: '/pages/index/index'})
}

/* 非空检查 */
function checkNotEmpty(value, message) {
  if (!value || value.trim() === '') {
    uni.showToast({
      title: message,
      icon: 'none'
    });
    return false;
  }
  return true;
}

/* 页面挂载时触发 */
onMounted(() => {
  /* 当页面挂载时挂载动画样式 */
  isBounced.value = true

  // 判断登录状态，如果已登录则跳转首页 */
  if (uni.getStorageSync('token').value !== undefined && uni.getStorageSync('userInfo') !== undefined) {
    uni.redirectTo({url: '/pages/index/index'})
  }
})
</script>

<style scoped lang="scss">
@import "../../style/index.scss";

@keyframes smoothBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  60% {
    opacity: 1;
    transform: scale(1.05);
  }
  80% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.smooth-bounce-in {
  animation: smoothBounceIn 0.5s ease-out forwards;
}

.login {
  width: 100vw;
  height: 100vh;
  background:
      linear-gradient(to bottom, transparent -100px, #fff 40vw),
      linear-gradient(to right, #ffd1de 30vw, #6e64f8);

  .login-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .login-box {
      width: 90%;
      max-width: 500px;
      height: auto;
      background: $an-bg-color;
      border-radius: 10px;
      box-shadow: 0 0 3px 3px rgba(216, 216, 216, 0.2);
      padding: 20px;
      box-sizing: border-box;

      .login-title {
        font-weight: bold;
        color: $an-text-color;
        font-size: 1.4em;

        .login-title-svg {
          width: 1.3em;
          height: 1.3em;
          vertical-align: middle;
          margin-left: 5px;
        }
      }

      .login-describe {
        margin-top: 2.5vh;
        font-size: 1em;
        color: $an-text-color;
      }

      .login-form {
        margin-top: 3vh;

        .login-input {
          margin-top: 1.5vh;
        }

        .login-btn {
          margin-top: 8vh;
          width: 100%;
          font-size: $an-font-size-base;
          background: $an-color-primary;
          color: $an-text-color-inverse;
        }

        .login-checkbox {
          margin-top: 1.5vh;
          font-size: $an-font-size-base;
          color: $an-text-color;
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }
      }
    }

    .login-box-footer {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 5vh;

      text {
        color: $an-text-color;
        font-size: 14px;
        line-height: 1.5;
      }
    }
  }

  .login-footer {
    width: 100vw;
    position: absolute;
    bottom: 1rem;
    display: flex;
    justify-content: center;
    font-size: 0.8em;
    color: $an-text-color-inverse;
  }
}
</style>
